
<template>
<div class="maincontent">
  <el-card class="box-card">
    <div class="breadcrumb" slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{name:'订单管理'}">订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="boxtitle">
      <div class="title">
        订单列表
      </div>
    </div>
    <div>
      <el-form :inline="true">
        <el-form-item label="订单编号">
          <el-input v-model.trim="selfrom.ids" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model.trim="selfrom.goodsname" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select placeholder="订单状态" v-model="selfrom.state" :clearable="true">
            <el-option v-for="(key,val) in ordertypes" :value="val" :label="key" :key="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dosearch"><i class="el-icon-search"></i>筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="tableloading">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="订单编号" min-width="150"  align="center" fixed>
          <template scope="scope">
            <router-link :to="{name:'订单详情',params:{id:scope.row.order_no}}">
              {{scope.row.order_no}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" min-width="150" align="center" prop="goods_name" fixed></el-table-column>
        <el-table-column label="商品类别" min-width="110" align="center" prop="goods_option"></el-table-column>
        <el-table-column label="商品单价" min-width="110" align="center" prop="trad_price"></el-table-column>
        <el-table-column label="购买数量" min-width="110" align="center" prop="num"></el-table-column>
        <el-table-column label="订单状态" min-width="110" align="center">
          <template scope="scope">
            {{ordertypes[scope.row.order_state]}}
          </template>
        </el-table-column>
        <el-table-column label="购买者" min-width="110" align="center" prop="store_name"></el-table-column>
        <el-table-column label="收货地址" min-width="200" align="center" prop="adress"></el-table-column>
        <el-table-column label="创建时间" min-width="120" align="center" prop="creattime" :formatter="formatterdate"></el-table-column>
        <el-table-column label="快递单号" min-width="200" align="center" prop="express_no"></el-table-column>
        <el-table-column label="操作" min-width="150"  align="center" fixed="right" >
            <template scope="scope">
<el-button  type="text" v-if="scope.row.order_state==2" size="small" @click="dochuku(scope.row)">确认出库</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top: 10px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageCount" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
        </el-pagination>
      </div>
    </div>

  </el-card>
  <el-dialog title="填写物流单号" :visible.sync="Visiblefahuo">
    <el-form label-width="80px">
      <el-form-item label="物流单号:" >
        <el-input v-model="ediordernum"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="Visiblefahuo = false">取 消</el-button>
        <el-button type="primary" @click="wuliunum">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script type="text/ecmascript-6">
import until from "../until/until";
import API from "../API";
import merge from "../until/merge"
import {
  mapState
}
from 'vuex';
export default {
  data() {
    return {
      selfrom: {
        goodsname: "",
        ids: "",
        state: ""
      },
      selactionfrom: {
        goodsname: "",
        ids: "",
        state: ""

      },
      tableloading: false,
      ordertypes: until.ordertypes,
      tableData: [],
      page: {
        pageSize: 10,
        pageCount: 1,
        totalCount: 0
      },
      allowpagechangeaction: true,
      Visiblefahuo:false,
      ediordernum:"",
      doitem:null,
    }
  },
  mounted() {
    this.initdata();
  },
  methods: {
    initdata(){
      this.tableloading=true;
      this.allowpagechangeaction=false;
      this.selfrom=merge({},this.selfrom,this.selactionfrom);
      API.orderSearch({
        order_state:this.selactionfrom.state,
        order_no:this.selactionfrom.ids,
        goods_name:this.selactionfrom.goodsname,
        pageCount:this.page.pageCount,
        pageSize:this.page.pageSize
      }).then((res)=>{
        this.tableloading=false;
        let json=res.data;
        if(json.message=="success"){
          this.tableData=json.orderList;
            this.page=json.page;
        }else {
            this.$message({
                showClose: true,
                message: '查询失败',
                type: 'error'
            });
        }
        setTimeout(()=>{
            this.allowpagechangeaction=true;
        },150);
        this.tableloading=false;
      }).catch(()=>{
        this.tableloading=false;
      })
    },
    dosearch() {
        this.selactionfrom=merge({},this.selactionfrom,this.selfrom);
        this.page.pageCount=1;
        this.initdata();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.initdata()
    },
    handleCurrentChange(val) {
      if (this.allowpagechangeaction) {
        this.page.pageCount = val;
        this.initdata()
      }
    },
    formatterdate(row, column, cellValue){
        return until.dateFtt("yyyy-MM-dd hh:mm:ss",new Date(row.creattime.time))
    },
    dochuku(item){
      this.doitem=item;
      this.Visiblefahuo=true;
    },
    wuliunum(){
      this.tableloading=true;
      API.updateOrderState({
        order_no:this.doitem.order_no,
        order_state:3,
        express_no:this.ediordernum
      }).then((res)=>{
        this.tableloading=false;
        this.Visiblefahuo=false;
        let json=res.data;
        if (json.message=="success") {
          this.doitem.express_no=this.ediordernum;
          this.doitem.order_state=3;
          this.$notify({
            title: '成功',
            message: '发货成功',
            type: 'success'
          });
        }else {
          this.$notify({
            title: '失败',
            message: '发货失败',
            type: 'error'
          });
        }
      }).catch(()=>{
        this.tableloading=false;
      })
    }
  },
  watch:{
    Visiblefahuo(newval){
      if (!newval) {
        this.ediordernum="";
      }
    }
  }
}
</script>
<style lang="less">
@import "../css/orderlist.less";
</style>
